<template>
<div class="house container" id="house">
    <p class="txt">出租房源</p>
    <Table border :columns="columns6" :data="data5" stripe :row-class-name="rowClassName"></Table>
    <Page :total="pageTotal" :page-size="pagesize" @on-change='handlepage' show-total  @on-page-size-change="handlePageSize"  show-elevator/>
    <div class="planview" id="planview">
        <!-- 标准层平面图 -->
        <PlanView></PlanView>
    </div>
    <div class="propertie" id="propertie">
        <!-- 楼盘概况 -->
        <Properties></Properties>
    </div>
    <div class="parameter" id="parameter">
        <!-- 楼盘参数 -->
        <Parameter></Parameter>
    </div>
</div>
</template>

<script>
import PlanView from '@/pages/home/list/PlanView'
import Properties from '@/pages/home/list/PropertiesView'
import Parameter from '@/pages/home/list/ParameterView'
import homeService from '@/network/service/homeService.js'

export default {
    data() {
        return {
            columns6: [{
                    title: '楼座',
                    width: 80,
                    key: 'tower',
                    size:'16px'
                },
                {
                    title: '房间号',
                    key: 'roomno'
                },
                {
                    title: '朝向',
                    key: 'orien'
                },
                {
                    title: '面积（m²）',
                    key: 'area',
                },
                {
                    title: '报价（元/天/㎡  含物业发票）',
                    key: 'price',
                }
            ],
            data5: [],
            pageTotal: 0, //总条数
            pagesize: 10, //每页条数
            page:0,//当前页数
            pageNum:0

        }
    },
    mounted() {
        this.getHouseList()
    },
    methods: {
        rowClassName: function (row, index) {
            if (index % 2 == 0) {
                return 'ivu-table-stripe-even';
            } else return 'ivu-table-stripe-odd';
        },

        getHouseList() {
            let params = {
                tower: '',
                startArea: '',
                endArea: '',
            }
            homeService.getHouseList(params,this.page , this.pagesize).then(res => {

                    let resulte = res.data;
                    // console.log(resulte)
                    let code = resulte.rescode;
                    let resmsg = resulte.msg;
                    if (code == 100) {
                        this.data5 = resulte.data;
                        this.pageTotal = resulte.totalSize;
                        this.pageNum = resulte.page;
                    } else {
                        this.$Message.error(resmsg)
                    }
                },
                error => {
                    this.$Message.error('服务器异常，请稍后再试')
                }
            )

        },

        handlepage(val) {
            this.page = val-1;
            // console.log(val) //当前第几页
            this.getHouseList()
        },

        handlePageSize(val) {
            this.pagesize = val;
            // console.log(val) // 每页多少条
            this.getHouseList()

        }
    },
    components: {
        PlanView,
        Properties,
        Parameter
    }
}
</script>

<style lang="less">
.house {
    padding: 46px 0px;

    .txt {
        text-align: center;
        font-size: 30px;
        font-family: 'PingFangSC-Semibold';
        margin-bottom: 60px;
        text-align: center;
    }
}

.ivu-table-wrapper {
    border: 2px solid #1274C8;
    // border-right: 0;
    margin-bottom: 30px;
}

.ivu-table td,
.ivu-table th {
    text-align: center !important;
    font-size: 16px;
}

.ivu-table th {
    color: #1274C8;
}

.ivu-table-border td,
.ivu-table-border th {
    border-right: 2px solid #1274C8;
    border-bottom: 2px solid #1274C8;
}

.ivu-table-stripe-even td {
    background: rgba(18, 116, 200, .1) !important;
}

/*奇数行*/
.ivu-table-stripe-odd td {
    background: rgba(255, 255, 255, .1)
}

.planview {
    margin-top: 84px;
}

.ivu-page {
    text-align: center;
}
</style>
